<template>
    <div>
        <button @click="toggleMenu" class="addbutton">+</button>
        <div class="popup-menu" v-if="isMenuVisible">
            <AddMenu :userName=userName @close="close" @submit="handleSubmit" />

        </div>
    </div>
</template>
<script>
import AddMenu from './AddMenu.vue';
export default {
    data() {
        return {
            isMenuVisible: false,
        }
    },
    props: {
        userName: String
    },
    components: {
        AddMenu
    },
    methods: {
        toggleMenu() {
            this.isMenuVisible = !this.isMenuVisible;
        },
        close(state) {
            this.isMenuVisible = false;
            if (state === 'success') {
                this.$emit('reflesh');
            }
        },
        handleSubmit(data) {
            this.$emit("submit", data);
            this.$emit('reflesh', 'success');
        }
    }
}
</script>
<style>
.popup-menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;

}

.addbutton {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    border: none;
    font-size: 2rem;
    background-color: #4CAF50;
    color: white;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    z-index: 9999;
}
</style>